import React from 'react';
// 引入接口
import {getcinema} from '../../api/cinema'
// 引入hook函数
import { useEffect } from 'react';

const Cinema = () => {
    useEffect(()=>{
        getcinema().then(res=>{
            // console.log(res);
            if (res.data.errNo == 0){
                const cinemalist = res.data.paginate.slice(0, 30)
                //创建地图实例
                var map = new window.BMapGL.Map("container");
                // 设置中心坐标
                var point = new window.BMapGL.Point(116.404, 39.915);
                //地图初始化，同时设置地图展示级别
                map.centerAndZoom(point, 15);
                //开启鼠标滚轮缩放
                map.enableScrollWheelZoom(true);
                //向地图中添加标注
                cinemalist.map((item)=>{
                    var point = new window.BMapGL.Point(item.gpsaddress.split(',')[0], item.gpsaddress.split(',')[1]);
                    // 根据点坐标给地图设置marker 标记
                    var marker = new window.BMapGL.Marker(point);
                    // 创建标注
                    map.addOverlay(marker);
                    //创建信息窗口
                    var opts = {
                        width: 100,
                        height: 50,
                        title: '当前位置:'
                    };
                    var infoWindow = new window.BMapGL.InfoWindow(item.address, opts);
                    //点标记添加点击事件
                    marker.addEventListener('click', function () {
                        map.openInfoWindow(infoWindow, point); // 开启信息窗口
                    });
                })
              
            }
        })
    },[])
    return (
        <div id="container" style={{ width: '100%', height: '100%' }}></div>
    );
}

export default Cinema;
